<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./bar/index.css">
    <link rel="stylesheet" href="./longStatic/css/index.css">
    <link rel="shortcut icon" href="./favicon.ico" />
    <script src="./JParticles-2.0.1/jparticles.js"></script>
    <script src="./JParticles-2.0.1/particle.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./bar/index.js"></script>
    <title>蔡司进博会展台速递</title>
    <style>
        .loading{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            background: #fff;
            z-index: 99;
        }

        .loading_logo{
            display: block;
            margin: 50vw auto;
        }

        .loadingBar{
            position: absolute;
            bottom: 10vw;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
        }

    </style>
</head>
<body>
<div class="loading">
    <img src="./longStatic/img/3211604291177_.pic_hd.jpg" class="loading_logo" width="50vw" alt="">
    <!--    <img src="./longStatic/img/logo" class="loading_logo" width="50vw" alt="">-->
    <div class="loadingBar" id="loadingBar" data-value="0"> </div>
</div>
<script type="text/javascript">
    var bar = new ldBar("#loadingBar", {
        "stroke": 'data:ldbar/res,stripe(#ff9,#fc9,1)',
        "value": 0
    });
    let time = setInterval(function() {
        console.log('ss');
        if(bar.value >= 99) {
            clearInterval(time)
        }
        bar.set(
            bar.value + 1,     /* target value. */
        );
    }, 200);
    $(document).ready(function(){
        setTimeout(function () {
            clearInterval(time)
            bar.set(
                100,     /* target value. */
            );
            $('.loading').fadeOut(500)
        }, 1000)
    });
</script>
<div class="step1 css">
    <img src="./longStatic/img/step.jpg" width="100%" alt="">
    <img src="./longStatic/img/step1_bg.jpg" width="100%" class="step1_bg" alt="">
    <div class="step1_mask css">
        <img src="./longStatic/img/step.jpg" alt="">
    </div>
</div>
<div class="step2">
    <img class="step2W zIndex" src="./longStatic/img/step2W.png" alt="">
    <img class="zIndex" src="./longStatic/img/step2.png" width="100%" alt="">
    <div id="canvas" style="height: 100%;width: 100%"></div>
    <script>
        window.onload = function () {
            new window.JParticles.particle('#canvas', {
                color: '#efefef',
                lineShape: 'cube',
                maxR: 13,
                minR: 5,
                maxSpeed: .5,
                lineWidth: 1,
                minSpeed: .3,
                range: 2000,
                proximity: 100,
                // 开启视差效果
                parallax: true
            });
        }
    </script>
</div>
<div class="step3">

    <img class="step3_line" src="./longStatic/img/step3_line.png" width="70%" alt="">
    <div class="step3-switch zIndex">
        <div class="step3-switch-cont"></div>
    </div>
    <img class="zIndex" src="./longStatic/img/step3.png" width="100%" alt="">
    <img class="bacteria zIndex" src="./longStatic/img/bacteria.png" alt="">
    <img class="bacteria1 zIndex" src="./longStatic/img/bacteria.png" alt="">
    <img class="bacteria2 zIndex" src="./longStatic/img/bacteria2.png" alt="">
    <img class="bacteria3 zIndex" src="./longStatic/img/bacteria3.png" alt="">
</div>
<div class="step4">
    <img class="step4-bg" src="./longStatic/img/step4_bg.png" width="100%" alt="">
    <img class="zIndex" src="./longStatic/img/step4.png" width="100%" alt="">
    <div class="step4-po">
        <img class="stepBor"  src="./longStatic/img/setp4-poBor.png" width="100%" alt="">
        <img class="zIndex" style="transform: translate(-1vw, 0.6vw)scale(2.3);" width="100%" src="./longStatic/img/setp4-po.png" alt="">
    </div>
</div>
<div class="step5">
    <img class="step5-bg" src="./longStatic/img/setp5-bg.png" width="100%" alt="">
    <img class="zIndex" src="./longStatic/img/setp5.png" width="100%" alt="">
    <div class="step5-o-1 zIndex">
        <img src="./longStatic/img/step5_1.png" style="transform: translateY(-5px)" width="100%" alt="">
        <img class="step5_1" src="./longStatic/img/step5_2_2.png" width="100%" alt="">
    </div>
    <div class="step5-o-2 zIndex">
        <img width="100%" src="./longStatic/img/step5_2.png" style="transform: scale(.97)translateY(-3px)" alt="">
        <img class="step5_2" src="./longStatic/img/step5_2_2.png" width="100%" alt="">
    </div>
</div>
<div class="step6">
    <img src="./longStatic/img/step6.png" width="100%" alt="">
    <img width="25%" class="step6_wx1" src="./longStatic/img/step6wx.png" alt="">
</div>
<script>
    /*设置一个长按的计时器，如果点击这个图层超过2秒则触发，mydiv里面的文字从out变in的动作*/
    var timeout ;
    $(".step6_wx1").mousedown(function() {
        timeout = setTimeout(function() {
            window.open('http://zeiss.nbiotemtc.com:13033')
        }, 2000);
    });

    $(".step6_wx1").mouseup(function() {
        clearTimeout(timeout);
    });

    $(".step6_wx1").mouseout(function() {
        clearTimeout(timeout);
    });

</script>
</body>
</html>
